<template>
  <div>
    <van-nav-bar class="page-nav-bar" title="搜索">
      <template #title>
        <van-button class="seachbtn" type="info" to="/search">
          <template #icon>
            <i class="toutiao toutiao-sousuo"></i>
          </template>
          <template #default> 搜索 </template>
        </van-button>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" class="channels">
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <!-- 内容 {{ item.id }} -->
        <!-- <art-list></art-list> -->
        <artList :channelsItem="item"></artList>
      </van-tab>
      <div class="hamburgerbtn" @click="hamburgerFn">
        <span class="toutiao toutiao-gengduo"></span>
      </div>
    </van-tabs>
    <van-popup v-model="show" position="bottom" :style="{ height: '100%' }">
      <channelEdit
        :channelActive="active"
        @close="show = false"
        :userChannels="channels"
        @ischannel="ischannel"
      ></channelEdit>
    </van-popup>
  </div>
</template>
<script>
//按需导入模块 需要加{}
import { loginApi } from "@/api/home";
//引入组件
import artList from "./component/artList.vue";
import channelEdit from "./component/channelEdit.vue";
import { getItem } from "@/utils/storage";

export default {
  //注册
  components: {
    artList,
    channelEdit,
  },
  data() {
    return {
      channels: [],
      show: false,
      active: 0,
      index: 0,
    };
  },
  async created() {
    try {
      //通过token 来判断用户是否登录 如果登录了 请求用户自己的频道，如果没有去判断本地缓存的频道列表
      //vuex 获取本地token的方法
      if (this.$store.state.token) {
        let { data } = await loginApi();
        this.channels = data.data.channels;
      } else {
        //我们先以 MYCHANNEL 作为键 来读取缓存，后面我们存缓存的时候也以这个键来存
        let storegeChanelList = getItem("MYCHANNEL");
        //如果本地缓存 有数据 就把缓存的数据直接给我我的频道
        if (storegeChanelList) {
          this.channels = storegeChanelList;
        } else {
          //r如果用户没登录，缓存也没数据，那就直接请求接口 获取游客数据
          let { data } = await loginApi();
          this.channels = data.data.channels;
        }
      }
      // let res = await loginApi();
      // console.log(res.data.data);
    } catch (err) {
      console.log(err);
    }
  },
  methods: {
    hamburgerFn() {
      this.show = true;
    },
    ischannel(index, bool) {
      this.show = bool;
      this.active = index;
    },
  },
};
</script>
<style scoped lang="less">
.seachbtn {
  width: 555px;
  height: 64px;
  background-color: #5babfb;
  border-radius: 32px;
  .toutiao {
    font-size: 32px;
  }
}
.page-nav-bar {
  //思考：我们加了样式vant组件不生效？
  //原因：用了scoped属性，样式只作用于当前vue文件
  //目标：我们当前style标签内的样式想要影响到vant深层次的dom元素
  //解决：使用deep深度选择符

  // 深度选择符
  //当你使用了第三方组件，修改样式改不了，就需要用到/deep/深度选择符
  /deep/ .van-button__text {
    color: #fff;
  }
  /deep/ .van-nav-bar__title {
    max-width: 100%;
  }
}
.channels {
  // padding-right: 66px;
  /deep/ .van-tab {
    min-width: 190px;
    border-right: 2px solid #edeff3;
  }
  /deep/ .van-tab__text {
    font-size: 30px;
  }
  /deep/ .van-tabs__line {
    width: 31px;
    height: 6px;
    background-color: #3296fa;
    border-radius: 3px;
  }
}
.hamburgerbtn {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 66px;
  height: 82px;
  line-height: 80px;
  text-align: center;
  background: #ffffff;
  opacity: 0.5;
  .toutiao {
    font-size: 40px;
  }
}
</style>
